/**
 * 组件名称：超级轮播图组件
 * 使用场景：轮播图+按钮控制页面
 * 功能介绍：轮播图功能+轮播图下方控制按钮功能
 * 功能进度：100%
 * 待办事项：无
 */

"use client";
import {useRef, useState} from "react";
import Link from "next/link";
import {Card, Container, Center, SimpleGrid, Image, Text} from "@mantine/core";
import {Carousel, Embla} from "@mantine/carousel";
import Autoplay from "embla-carousel-autoplay";
import {IpdToolShow} from "./IpdCarouselPage";
import classes from "./IpdCarousel.module.css";

const tools = [
  {
    link: "/ipdv2/tools/traffic-forcast",
    image: {alt: "Traffic Forcast", src: "/IpShowTools/ShowForcast.png"},
    card: {name: "流量预测", index: 0},
    info: {
      name: "数智化流量预测",
      text: "Digital & Intelligent Traffic Forcast",
      items: [
        "科学的预测模型，自带负反馈调节机制",
        "支持多种预测方法，多维度保证预测质量",
        "在线生成客户满意的预测报告",
      ],
    },
  },
  {
    link: "/ipdv2/tools/relay-simulation",
    image: {alt: "Relay Simulation", src: "/IpShowTools/ShowLink.png"},
    card: {name: "中继工具", index: 1},
    info: {
      name: "数智化中继工具",
      text: "Digital & Intelligent Relay Simulation",
      items: [
        "内置高性能网络仿真内核",
        "支持多方案配置与结果对比分析",
        "可与传输、资管等其他环节快速对接",
      ],
    },
  },
  {
    link: "/ipdv2/tools/device-config",
    image: {alt: "Device Config", src: "/IpShowTools/ShowDevice.png"},
    card: {name: "设备配置", index: 2},
    info: {
      name: "数智化设备配置",
      text: "Digital & Intelligent Device Config",
      items: [
        "基于配置原则，快速生成设备配置清单",
        "面向网络演进，支持配置原则的在线维护",
        "支持基于设备配置的投资估算",
      ],
    },
  },
  {
    link: "/ipdv2/tools/pannel-assignment",
    image: {alt: "Pannel Assignment", src: "/IpShowTools/ShowPannel.png"},
    card: {name: "面板分配", index: 3},
    info: {
      name: "智能化面板分配",
      text: "Digital & Intelligent Pannel Assignment",
      items: ["基于分配原则，快速生成面板分配方案", "提供可视化端口操作", "支持核查与统计功能"],
    },
  },
  {
    link: "/ipdv2/tools/safety-check",
    image: {alt: "Safety Check", src: "/IpShowTools/ShowSafety.png"},
    card: {name: "安全核查", index: 4},
    info: {
      name: "高效率安全核查",
      text: "Safety Check",
      items: ["基于安全设计原则，生成核查报告", "支持多类型核查", "可自定义核查维度"],
    },
  },
  {
    link: "/ipdv2/tools/procurement-check",
    image: {alt: "Procurement Check", src: "/IpShowTools/ShowProcurement.png"},
    card: {name: "集采审核", index: 5},
    info: {
      name: "数智化集采工具",
      text: "CMCC Procurement Toolset",
      items: [
        "填报人员在线填报集采需求",
        "审核人员维护表单限制条件、下发集采表单",
        "数据底座全面拉通，数据可溯源、可同步",
        "支持全国数据统计，以项目形式维护每期集采需求调研",
      ],
    },
  },
];

// 究极形态的仿微软商店的轮播图+下方悬停滚动至对应页面
export const IpdCarousel = () => {
  const autoplay = useRef(Autoplay({delay: 3000}));
  const [embla, setEmbla] = useState<Embla | null>(null);

  return (
    <>
      {/* 轮播图部分 */}
      <Carousel
        loop
        controlSize={40}
        classNames={classes}
        getEmblaApi={setEmbla}
        plugins={[autoplay.current]}
        onMouseEnter={autoplay.current.stop}
        onMouseLeave={autoplay.current.reset}
      >
        {tools.map((item) => (
          <Carousel.Slide key={item.info.name}>{<IpdToolShow {...item} />}</Carousel.Slide>
        ))}
      </Carousel>

      {/* 卡片列表部分 */}
      <Container size="lg" mt={70}>
        <SimpleGrid cols={{base: 2, md: 3, lg: 6}}>
          {tools.map((item) => (
            <Card
              key={item.card.name}
              withBorder
              component={Link}
              href={item.link}
              className={classes.item}
              // 注意这里typescript提供的?.语法糖，等同于if判断，
              onMouseEnter={() => {
                embla?.scrollTo(item.card.index);
                embla?.plugins().autoplay?.stop();
              }}
              onMouseLeave={() => {
                if (embla) embla.plugins().autoplay?.play();
              }}
            >
              <Center h="100%" inline>
                <Image
                  alt={item.image.alt}
                  src={item.image.src}
                  h={{base: 60, md: 55, lg: 45}}
                  w="auto"
                  fit="contain"
                />
                <Text size="md" fw={500}>
                  {item.card.name}
                </Text>
              </Center>
            </Card>
          ))}
        </SimpleGrid>
      </Container>
    </>
  );
};
